var puValveArray = []; // 普通
var zhiValveArray = []; // 智能
var allValueArray = []; // 所有
var colorValue = '#1CC78E'
var showTipIndex = 0; // 播放下标
var showTipTimer = ''; // 定时器
var seriesIndex = 0; // 0 1 智能阀 普通阀
var isTimer = true;
var filterName = '中国'
//定义一个全局变量，用来统计每个省有几个市
var num = 0;
// 1.中国地图
var chinaMap = "./js/geojson/data-1621947890604-aSx9ZxNx1.json";
//2.台湾省地图
var taiWanMap = "./js/geojson/data-1621947975053-R-8DyOg0e.json";
//3.海南省地图
var haiNanMap = "./js/geojson/data-1621948145271-68eCc32D3.json";
//4.安徽省地图
var anHuiMap = "./js/geojson/data-1621948188732-TXl0sSFuy.json";
//5.江西省地图
var jiangXiMap = "./js/geojson/data-1621948233209--fwwE8_l7.json";
//6.湖南省地图
var huNanMap = "./js/geojson/data-1621948319356-HrpXRrJ6l.json";
//7.云南省地图
var yunNanMap = "./js/geojson/data-1621948345350-4CVpSWQSK.json";
//8.贵州省地图
var guiZhouMap = "./js/geojson/data-1621948396733-Udi6XAEgw.json";
//9.广东省地图
var guangDongMap = "./js/geojson/data-1621948441031-pLiWmoZet.json";
//10.福建省地图
var fuJianMap = "./js/geojson/data-1621948490541-XH7VxL7oj.json";
//11.浙江省地图
var zheJiangMap = "./js/geojson/data-1621948532095-VbosDul6I.json";
//12.江苏省地图
var jiangSuMap = "./js/geojson/data-1621948565021-s3yTJP3Zl.json";
//13.四川省地图
var siChuanMap = "./js/geojson/data-1621948609883-izF8OEpk9.json";
//14.重庆市市地图
var chongQingMap = "./js/geojson/data-1621948631044-2W6Sgh1H-.json";
//15.湖北省地图
var huBeiMap = "./js/geojson/data-1621948649243-GxqNlvJU5.json";
//16.河南省地图
var heNanMap = "./js/geojson/data-1621948703170-imaQv84Cd.json";
//17.山东省地图
var shanDongMap = "./js/geojson/data-1621948716835-cOtdSmaJo.json";
//18.吉林省地图
var jiLinMap = "./js/geojson/data-1621948723748-c4ZOa5KTk.json";
//19.辽宁省地图
var liaoNingMap = "./js/geojson/data-1621948731460-_efUVEzY0.json";
//20.天津市市地图
var tianJinMap = "./js/geojson/data-1621948739174-L2C2t_F5t.json";
//21.北京市市地图
var beiJingMap = "./js/geojson/data-1621948858020-sL_9-nzvY.json";
//22.河北省地图
var heBeiMap = "./js/geojson/data-1621948873563-JNgr5paiY.json";
//23.山西省地图
var shanXiMap = "./js/geojson/data-1621948883641-gFXuKdbe9.json";
//24.陕西省地图
var shanXi2Map = "./js/geojson/data-1621948892136-f9xS_1lzo.json";
//25.宁夏回族自治区省地图
var ningXiaMap = "./js/geojson/data-1621948903314-2dSyFDeNM.json";
//26.青海省地图
var qingHaiMap = "./js/geojson/data-1621948912616-JofrNyZIQ.json";
//27.西藏自治区地图
var xiZangMap = "./js/geojson/data-1621948923877-Gr55e-l4V.json";
//28.黑龙江省地图
var heiLongJiangMap = "./js/geojson/data-1621948931666-7RFUheW7w.json";
//29.内蒙古自治区地图
var neimengGuMap = "./js/geojson/data-1621948941132-gcGpDlAy3.json";
//30.甘肃省地图
var ganSuMap = "./js/geojson/data-1621948952287-fhag8An8k.json";
//31.新疆维吾尔自治区省地图
var xinJiangMap = "./js/geojson/data-1621948963218-CwFnOzi4B.json";
//32.广西壮族自治区地图
var guangxiMap = "./js/geojson/data-1621948972207-pHKfjk3Zs.json";
// 上海
var shanghaiMap = './js/geojson/shanghai.json';
var xianggangMap  = './js/geojson/xianggang.json';
var aomenMap = './js/geojson/aomen.json';
//设置初始地图
var mapname = chinaMap;
//设置省份的json 这里注意名字要和中国地图上的名字一致
var mapJson = [{
    name: "台湾省",
    json: taiWanMap,
  },
  {
    name: "海南省",
    json: haiNanMap,
  },
  {
    name: "安徽省",
    json: anHuiMap,
  },
  {
    name: "江西省",
    json: jiangXiMap,
  },
  {
    name: "湖南省",
    json: huNanMap,
  },
  {
    name: "云南省",
    json: yunNanMap,
  },
  {
    name: "贵州省",
    json: guiZhouMap,
  },
  {
    name: "广东省",
    json: guangDongMap,
  },
  {
    name: "福建省",
    json: fuJianMap,
  },
  {
    name: "浙江省",
    json: zheJiangMap,
  },
  {
    name: "江苏省",
    json: jiangSuMap,
  },
  {
    name: "四川省",
    json: siChuanMap,
  },
  {
    name: "重庆市",
    json: chongQingMap,
  },
  {
    name: "湖北省",
    json: huBeiMap,
  },
  {
    name: "河南省",
    json: heNanMap,
  },
  {
    name: "山东省",
    json: shanDongMap,
  },
  {
    name: "吉林省",
    json: jiLinMap,
  },
  {
    name: "辽宁省",
    json: liaoNingMap,
  },
  {
    name: "天津市",
    json: tianJinMap,
  },
  {
    name: "北京市",
    json: beiJingMap,
  },
  {
    name: "河北省",
    json: heBeiMap,
  },
  {
    name: "山西省",
    json: shanXiMap,
  },
  {
    name: "陕西省",
    json: shanXi2Map,
  },
  {
    name: "宁夏回族自治区",
    json: ningXiaMap,
  },
  {
    name: "青海省",
    json: qingHaiMap,
  },
  {
    name: "西藏自治区",
    json: xiZangMap,
  },
  {
    name: "黑龙江省",
    json: heiLongJiangMap,
  },
  {
    name: "内蒙古自治区",
    json: neimengGuMap,
  },
  {
    name: "甘肃省",
    json: ganSuMap,
  },
  {
    name: "新疆维吾尔自治区",
    json: xinJiangMap,
  },
  {
    name: "广西壮族自治区",
    json: guangxiMap,
  },
  {
    name: '上海市',
    json: shanghaiMap
  },
  {
    name: '香港特别行政区',
    json: xianggangMap
  },
  {
    name: '澳门特别行政区',
    json: aomenMap
  }
];
// console.log('xxxxx', mapJson.length)
//提取自动播放的代码
var myChart = echarts.init(document.getElementById('map'));
//点击事件
myChart.on('click', function(e) {
  // console.log('e', e)
  if(e.componentType == 'geo'){
    // 执行下面操作
  }else{
    goDataView2(e.value[6])
    return
  }
  //过滤 这里是es6语法 filter函数可以看成是一个过滤函数，返回符合条件的元素的数组
  var chooseName = mapJson.filter((item) => {
    //我们根据名字来判断是否选择一种
    return item.name == e.name;
  });

  //这里的chooseName是一个数组，我们需要获取到json 有兴趣可以打印
  //{name: "新疆维吾尔自治区", json: "json/新疆维吾尔自治区.json"}
  mapname = chooseName[0].json;
  console.log('mapname', e.name)
  filterName = e.name
  //添加一个返回按键
  $('<div class="back">返回</div>').appendTo(
    $('.ditu')
  );
  //给返回按键设置样式
  $('.back').css({
    position: 'absolute', //绝对地位
    left: '20px', //设置位置
    top: '20px', //设置位置
    color: '#fff', //设置字体颜色
    'font-size': '14px', //设置字体大小
    cursor: 'pointer', //变小手
  });
  //设置返回按钮的点击事件
  $('.back').click(function() {
    //地图重新设置为中国地图
    mapname = chinaMap;
    filterName = '中国'
    //隐藏按钮
    $('.back').css({
      opacity: 0,
    });
    isTimer = true
    //绘制地图
    myChart.clear();
    mapInit();
  });
  isTimer = false
  //绘制地图
  myChart.clear();
  mapInit();
});
//设置初始化时间
// setTimeout(function() {
//   mapInit();
// }, 500);

function goDataView2(id) {
  // alert('进入大屏2')
  window.location.href = pathUrl + '?id=' + id
}

function setToolTip() {
  showTipTimer = setInterval(function() {
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: seriesIndex,
      dataIndex: showTipIndex,
    });
    showTipIndex++;
    if(seriesIndex==0){
      if(showTipIndex>=zhiValveArray.length){
        showTipIndex = 0
        seriesIndex = 1
      }
    }else{
      if(showTipIndex>=puValveArray.length){
        showTipIndex = 0
        seriesIndex = 0
      }
    }
  }, 3000)
}

//创建地图
var mapInit = () => {
  // myChart.showLoading({
  //   text: '地图加载中...',
  //   color: '#07B5EC',
  //   textColor: '#07B5EC',
  //   maskColor: 'rgba(255, 255, 255, 0)',
  //   zlevel: 0
  // })
  // console.log('puValveArray', puValveArray)
  // console.log('zhiValveArray', zhiValveArray)
  // console.log('allValueArray', allValueArray)

  //调用中国地图（同步）
  $.getJSON(mapname, function(geoJson) {
    //获取到长度（每个省里有几个市）
    num = geoJson.features.length;
    //调用我们通过json对象注册的地图
    echarts.registerMap('China', geoJson);
    //文件加载的动画
    // setTimeout(function () {
    //   myChart.hideLoading();
    // }, 500)
    //地图开始
    var option = {
      legend: {
        data: ['智能阀', '普通阀'],
        show: true,
        zlevel: 3,
        left: '10',
        top: 'bottom',
        orient: "vertical",
        textStyle: {
          color: "rgba(255, 255, 255, 1)"
        }
      },
      geo: {
        map: 'China', //地图为刚刚设置的China
        aspectScale: 0.90,
        layoutCenter: ["50%", "50%"], //地图位置
        layoutSize: '100%',
        /*
        * 原来效果
        * */
        // itemStyle: { //地图区域的多边形 图形样式
        //   normal: {
        //     color: '#007297',
        //     shadowColor: 'rgba(0,114,152,0.9)',
        //     shadowBlur: 10,
        //     shadowOffsetX: 0,
        //     shadowOffsetY: 8,
        //     opacity: 0.8,
        //   },
        //   emphasis: {
        //     areaColor: '#276fce',
        //   },
        // },
        itemStyle: {
          normal: {
            color: '#020d16',
            areaColor: '#0c274b',
            borderColor: '#1cccff',
            borderWidth: 1.5
          },
          emphasis: {
            areaColor: '#02102b',
            label: {
              color: "#fff"
            }
          }
        },
        label: {
          normal: {
            textStyle: {
              color: "#fff"
            }
          },
          emphasis: {
            textStyle: {
              color: "#fff"
            }
          }
        },
        roam: true,
        zoom: 1, //当前视角的缩放比例
        scaleLimit: { //滚轮缩放的极限控制
          min: 1,
          max: 10
        },
        zlevel: 1
      },
      tooltip: {
        show: false,
        enterable: true,
        triggerOn: 'mousemove|click',
        backgroundColor: '#056689',
        borderColor: '#1CC78E',
        borderWidth: 1,
        padding:5,
        textStyle: {
          color: "#fff",
          fontSize: 14,
        }
      },
      series: [ //数据系列
        // {
        //   type: 'map', //地图类型
        //   //地图上文字
        //   label: {
        //     normal: {
        //       show: false, //是否显示标签
        //       textStyle: {
        //         color: '#fff',
        //       },
        //     },
        //     emphasis: {
        //       textStyle: {
        //         color: '#fff',
        //       },
        //     },
        //   },
        //   //地图区域的多边形 图形样式
        //   itemStyle: {
        //     normal: {
        //       color: '#020d16',
        //       areaColor: '#0c274b',
        //       borderColor: '#1cccff',
        //       borderWidth: 1.5
        //     },
        //     emphasis: {
        //       areaColor: '#02102b',
        //       label: {
        //         color: "#fff"
        //       }
        //     }
        //   },
        //   aspectScale: 0.90,
        //   layoutCenter: ["50%", "50%"], //地图位置
        //   layoutSize: '100%',
        //   zoom: 1, //当前视角的缩放比例
        //   scaleLimit: { //滚轮缩放的极限控制
        //     min: 1,
        //     max: 10
        //   },
        //   roam: true,
        //   map: 'China', //使用中国地图
        // },
        {
          type: 'effectScatter',
          name: '智能阀',
          coordinateSystem: 'geo',
          zlevel: 2,
          symbolSize: 10,
          geoIndex: 0,
          rippleEffect: { //坐标点动画
            period: 3,
            scale: 5,
            brushType: 'fill'
          },
          data: filterData(zhiValveArray),
          itemStyle: { //坐标点颜色
            normal: {
              show: true,
              color: '#21D59B',
              shadowBlur: 10,
              shadowColor: '#fff'
            },
            emphasis: {
              areaColor: '#f00'
            }
          },
          tooltip: {
            show: true,
            trigger: 'item',
            formatter(params) {
              if(params.value[4]=='正常'){
                colorValue = '#1CC78E'
              }else if(params.value[4]=='异常'){
                colorValue = '#FFD728'
              }else if(params.value[4]=='故障'){
                colorValue = '#FE3649'
              }
              let arr = ["<div style='width:100%; background:"+colorValue+"; cursor: pointer' onclick='goDataView2("+params.value[6]+")'>" + params.name + "</div>" + "企业行业：" + params.value[2], "设备总数：" + params.value[3], "运行状态：<span style='color: "+colorValue+"'>" + params.value[4]+ "</span>", "投运时间：" + params.value[5]];
              return arr.join("<br />")
            }
          }
        },
        {
          type: 'effectScatter',
          name: '普通阀',
          coordinateSystem: 'geo',
          zlevel: 2,
          symbolSize: 10,
          geoIndex: 0,
          rippleEffect: { //坐标点动画
            period: 3,
            scale: 5,
            brushType: 'fill'
          },
          data: filterData(puValveArray),
          itemStyle: { //坐标点颜色
            normal: {
              show: true,
              color: '#FFC700',
              shadowBlur: 10,
              shadowColor: '#fff'
            },
            emphasis: {
              areaColor: '#f00'
            }
          },
          tooltip: {
            show: true,
            trigger: 'item',
            formatter(params) {
              if(params.value[4]=='正常'){
                colorValue = '#1CC78E'
              }else if(params.value[4]=='异常'){
                colorValue = '#FFD728'
              }else if(params.value[4]=='故障'){
                colorValue = '#FE3649'
              }
              let arr = ["<div style='width:100%; background:"+colorValue+"; cursor: pointer' onclick='goDataView2("+params.value[6]+")'>" + params.name + "</div>" + "企业行业：" + params.value[2], "设备总数：" + params.value[3], "运行状态：<span style='color: "+colorValue+"'>" + params.value[4]+ "</span>", "投运时间：" + params.value[5]];
              return arr.join("<br />")
            },
          },
        }
      ]
    };
    myChart.setOption(option);
    //  showTip 轮播
    if(isTimer){
      setToolTip()
    } else {
      if(showTipTimer){
        clearInterval(showTipTimer)
        showTipTimer = ''
      }
    }
    window.addEventListener("resize", function() {
      myChart.resize();
    });
  });
};


myChart.on('mouseover', function(e) {
  // console.log('进入', e);
  if(e.componentType == "series"){
    if(isTimer){
      clearInterval(showTipTimer);
      showTipTimer = ''
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: e.seriesIndex,
        dataIndex: e.dataIndex,
      })
      seriesIndex = e.seriesIndex
      showTipIndex = e.dataIndex + 1
      if(seriesIndex==0){
        if(showTipIndex>=zhiValveArray.length){
          showTipIndex = 0
          seriesIndex = 1
        }
      }else{
        if(showTipIndex>=puValveArray.length){
          showTipIndex = 0
          seriesIndex = 0
        }
      }
    }else{
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: e.seriesIndex,
        dataIndex: e.dataIndex,
      })
    }
  }
})
//
myChart.on('mouseout', function(e) {
  // console.log('离开', e);
  if(e.componentType == "series"){
    if(isTimer){
      setToolTip()
    } else {
    }
  }
})

function filterData(data) {
  if(filterName == '中国'){
    return data
  }else{
    var arr = []
    $(data).each(function (i, v) {
      // console.log('i', i, v)
      if(v.value[7] == filterName){
        arr.push(v)
      }
    })
    return arr
  }
}
